<template>
  <div>
    <h1>HOME</h1>
    <div>
    <!-- 
    如果直接使用router-link组件进行导航，被称作为声明式路由导航。
    router-link声明式导航底层仍然使用的是编程式路由导航，已经默认帮我们解决了重复导航的bug。
      - to属性：就是push方法接受的第一个参数location。
    -->
      <router-link to="/home/news">新闻</router-link>
      <router-link 
      :to="{
        path:'/home/music',
      }"
      >音乐</router-link>
      <router-link 
      :to="{
        name:'Game',
      }"
      >游戏</router-link>
    </div>
    <div>
      <button>新闻Replace</button>
      <button>音乐Replace</button>
      <button>游戏Replace</button>
  </div>
  <router-view></router-view>
  </div>
</template>
<script>
export default {
  name:"Home",
};
</script>
<style>

</style>